<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- ============================CSS link goes here============================ -->
	<!-- <link rel="stylesheet" href="css/globle.css"> -->
	<link rel="stylesheet" href="jquery-ui-1.10.3.flick/css/flick/jquery-ui-1.10.3.custom.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" media="screen">
	<!-- Responsive -->
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/buttons-min.css">
	<link rel="stylesheet" href="css/pure-skin-mine.css">	
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
	<!-- <link rel="stylesheet" href="css/modal.css"> -->
	<link rel="stylesheet" href="css/decoration.css">
	<link rel="stylesheet" href="css/responsive.css">
	<link rel="stylesheet" href="css/buttons.css">
	<link rel="stylesheet" href="js/DataTables/css/jquery.dataTables.css">
	<!-- ============================End of CSS links============================ -->

	<!-- ============================JS file goes here============================ -->
	<script src="jquery-ui-1.10.3.flick/js/jquery-1.9.1.js"></script>
	<script src="jquery-ui-1.10.3.flick/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- Bootstrap -->
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/jsResponsive.js"></script>
	<script src="js/AI1JavaScript.js"></script>
	<script src="js/jsButton.js"></script>
	
	<script src="js/getURLParameter.js"></script>
	<script src="js/dataExchangeAjax.js"></script>

	<script src="js/DataTables/js/jquery.dataTables.js"></script>
	<script src="js/inboxAjax.js"></script>
	<script>
	// $(document).ready(function() {
	// 	$('#hiddenCaseInfoDiv').hide();
	// });
	</script>
</head>
<body>
	<header class="row-fluid">
		<div class="row-fluid">
			<div class="span3 offset9">
				<img id="govLogo" src="images/gov-logo.png" alt="Singapore Government verified"></img>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span12">
				<img id="banner" src="" alt="Integrated Case Management System" class="span8" href="#">
			</div>
		</div>
		<div class="row-fluid">
			<nav class="navbar">
				<div class="navbar-inner">
					<ul class="nav nav-pills">
						<li><a href="inbox(1).html">Inbox</a></li>
						<li><a href="#">Reports</a></li>
						<li><a href="create-case(1).html">New Case</a></li>
					</ul>
				</div>
			</nav>
		</div>
		<div class="row-fluid">
			<h1 class="span6" onclick="">Reply to customer</h1>
			<hr class="thickLine">
		</div>
	</header>
	<div class="container-fluid main">
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#caseID">Case ID</label>
				</div>
				<div class="span8">
					<span id="caseID"></span>
				</div>
			</div>
			<div class="span6">
				
			</div>
		</div>
		<div class="row-fluid" id="hiddenCaseInfoDiv">
			<div class="row-fluid">
			<div class="span6">
				<div class="row-fluid">
					<div class="span4">
						<label for="#caseStatus">Status</label>
					</div>
					<div class="span8"><span id="caseStatus"></span></div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label>Incident Date</label>
				</div>
				<div class="span8"><span id="fbDate"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#recDate">Received Date</label>
				</div>
				<div class="span8"><span id="recDate"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#dueDate">Due Date</label>
				</div>
				<div class="span8"><span id="dueDate"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#closedDate">Closed Date</label>
				</div>
				<div class="span8"><span id="closedDate"></span></div>
			</div>
		</div>
		
		<div class="row-fluid">
			<div class="span2">
				<label for="#sbjTitle">Subject Title</label>
			</div>
			<div class="span10"><span id="sbjTitle"></span></div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#fbType">Feedback Type</label>
				</div>
				<div class="span8"><span id="fbType"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#channel">Channel</label>
				</div>
				<div class="span8"><span id="channel"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<label for="#caseDesc">Description</label>
			</div>
			<div class="span10" id="caseDescDiv">
				<p id="caseDesc" class="bigTextblock"></p>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#agency">Agency</label>
				</div>
				<div class="span8">
					<span id="agency"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#category">Category</label>
				</div>
				<div class="span8">
					<span id="category" class="autoCome"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#subCate">Sub Category</label>
				</div>
				<div class="span8">
					<span id="subCate" class="autoCome"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#address">Address</label>
				</div>
				<div class="span8">
					<p id="address"></p>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#postal">Postal Code</label>
				</div>
				<div class="span8"><span id="postal"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#uploadedImg">Uploaded Image</label>
				</div>
				<div class="span8"><img id="uploadedImg" src="" alt="Uploaded image"></div>
			</div>
			
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#lastUpdateAgency">Last Update Agency</label>
				</div>
				<div class="span8"><span id="lastUpdateAgency"></span></div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#lastAction">Last Update Action</label>
				</div>
				<div class="span8"><span id="lastAction"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#lastUpdateDate">Last Update Date</label>
				</div>
				<div class="span8"><span id="lastUpdateDate"></span></div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2">
				<label for="#closureDesc">Closure Description</label>
			</div>
			<div class="span10">
				<p id="closureDesc" class="bigTextblock"></p>
			</div>
		</div>
		<div class="rowfluid">
			<h2>Customer information</h2>
			<hr class="slimLine">
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#custName">Customer Name</label>
				</div>
				<div class="span8">
					<span id="custName"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#phone">Phone</label>
				</div>
				<div class="span8">
					<span id="phone"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#NRIC">NRIC</label>
				</div>
				<div class="span8">
					<span id="NRIC"></span>
				</div>
			</div>
			<div class="span6">
				<div class="span4">
					<label for="#mCustID">Mobile Customer ID</label>
				</div>
				<div class="span8">
					<span id="mCustID"></span>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<div class="span4">
					<label for="#email">Email</label>
				</div>
				<div class="span8">
					<span id="email"></span>
				</div>
			</div>
		</div>
		<!-- load case info to page elements when those elements are loaded to page -->
		<script>loadCase2Page()</script>



		</div>
		<div class="row-fluid" id="replyPanel">
			
			<div class="row-fluid">
				<div class="span2">
					<label for="#panelReply-caseReply">Enter Reply</label>
				</div>
				<div class="span10">
					<textarea class="bigTextarea" name="caseReply" id="panelReply-caseReply" placeholder="This is the reply seen by the customer"></textarea>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span2 offset2">
					<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="0">Interim Reply</input></label>
				</div>
				<div class="span2">
					<label style="cursor:pointer;"><input type="radio" name="replyType" id="panelReply-cbxInterim" value="1">Final Reply</input></label>
				</div>
				<div class="span5 offset1">
					<div class="row-fluid">
						<div class="span6">
							<label for="#panelReply-ddlInformedCustomer" style="float:left;">Informed Customer?</label>
						</div>
						<div class="span6">
							<div class="row-fluid">
								<div class="span6">
									<label style="cursor:pointer;"><input type="radio" name="isInformed" id="panelReply-cbxInformedY" value="1">Yes</input></label>
								</div>
								<div class="span6">
									<label style="cursor:pointer;"><input type="radio" name="isInformed" id="panelReply-cbxInformedN" value="0">No</input></label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid" id="replyPanel-remarksDiv">
				<div class="row-fluid">
					<div class="span2"><label for="#replyPanel-replyRemarks">Remarks (Internal)</label></div>
					<div class="span10">
						<textarea class="bigTextarea" name="replyRemarks" id="replyPanel-replyRemarks" placeholder="These remarks will not be visible to the customer"></textarea>
					</div>
				</div>
			</div>
			<div class="row-fluid" id="replyPanel-buttonsDiv">
				<button id="replyPanel-btnSubmitReply" type="button" class="pure-button pure-button-primary tailButton" onclick="submitReply()">Submit Reply</button>
				<button id="replyPanel-btnAddRemarks" type="button" class="pure-button pure-button-secondary tailButton toggleBtn">Add Remarks&nbsp;&nbsp;<i class="fa fa-chevron-up"></i></button>
			</div>
		</div>


	</div>


	<footer class="row-fluid">
		<span id="copyright">&copy; Copyright 2013, All rights Reserved.</span>
		<span id="PSTCD">Privacy Statement | Terms &amp; Conditions | Disclaimer</span>
	</footer>
</body>
</html>